<template>
  <div class="compitem flexitem">
    <div class="compname">{{title}}</div>
    <div class="flexright">
      <div class="flextop">
        <el-radio v-model="radio" label="1">按工作日</el-radio>
        <el-checkbox-group v-model="checkList">
          <el-checkbox label="1">周一</el-checkbox>
          <el-checkbox label="2">周二</el-checkbox>

          <el-checkbox label="3">周三</el-checkbox>
          <el-checkbox label="4">周四</el-checkbox>
          <el-checkbox label="5">周五</el-checkbox>
          <el-checkbox label="6">周六</el-checkbox>
          <el-checkbox label="0">周日</el-checkbox>
        </el-checkbox-group>
        <el-checkbox v-model="checked" style="padding-left:10px;">全选</el-checkbox>
      </div>
      <div class="flextop flexbtom">
        <el-radio v-model="radio" label="2">自定义</el-radio>
        <el-date-picker
          ref="datesRef"
          type="dates"
          v-model="dateArr"
          :editable="false"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          placeholder="选择一个或多个日期"
        ></el-date-picker>
      </div>
    </div>
  </div>
</template>
<script>
import { SETDATE } from "../../../api/System.js";
export default {
  props: {
    title: {
      type: String
    },
    name: {
      type: String
    },
    val: {
      type: String
    },
    len: {
      type: Array
    }
  },
  data() {
    return {
      value: "",
      radio: "1",
      checkList: [],
      dateArr: [],
      time: [],
      status: true,
      checked: false
    };
  },
  created() {
    console.log("..>>>>>>>");
    console.log(this.len);
    if (!this.len) {
      console.log("嘻嘻嘻");
      this.time = ["", ""];
      var date = SETDATE(new Date().getTime() / 1000);
      var year = Number(date.substring(0, 4)) + 2;
      var other = date.substring(4, date.length);
      this.time = [new Date().getTime(), new Date(year + other).getTime()];
    }
    // this.value = this.val;
    if (!this.val) {
      return;
    }
    var val = JSON.parse(this.val);
    setTimeout(() => {
      if (val.type == 1 && val.val.length > 0) {
        this.radio = val.type + "";
        if (val.type == 1) {
          var arr = [];
          val.val.forEach(element => {
            arr.push(this.getday(element * 1000) + "");
          });
          //数组去重
          let uniqueSet = Array.from(new Set(arr));
          //  var array = [];
          // uniqueSet.forEach(element => {
          //   array.push(element + "");
          // });
          this.checkList = uniqueSet;
        } else {
          var arr = [];
          val.val.forEach(element => {
            arr.push(new Date(element * 1000));
          });
          this.dateArr = arr;
        }
      }
      this.status = false;
    }, 1000);
    // this.getWeek(1);
    // this.transformTime(this.time[0])
  },
  mounted() {},
  methods: {
    //获取周几
    getday(time) {
      return new Date(time).getDay();
    },
    transformTime(timestamp = +new Date()) {
      if (timestamp) {
        var time = new Date(timestamp);
        var y = time.getFullYear();
        var M = time.getMonth() + 1;
        var d = time.getDate();

        return y + "-" + this.addZero(M) + "-" + this.addZero(d);
      } else {
        return "";
      }
    },
    addZero(m) {
      return m < 10 ? "0" + m : m;
    },
    getWeek(weekNum) {
      var dateArr = new Array();
      var begin = this.transformTime(this.time[0]);
      var end = this.transformTime(this.time[1]);
      var stimeArr = begin.split("-"); //=>["2018", "01", "01"]
      var etimeArr = end.split("-"); //=>["2018", "01", "30"]

      var stoday = new Date();
      stoday.setUTCFullYear(stimeArr[0], stimeArr[1] - 1, stimeArr[2]);
      var etoday = new Date();
      etoday.setUTCFullYear(etimeArr[0], etimeArr[1] - 1, etimeArr[2]);

      var unixDb = stoday.getTime(); //开始时间的毫秒数
      var unixDe = etoday.getTime(); //结束时间的毫秒数
      // console.log(unixDb);
      // console.log(unixDe);
      for (var k = unixDb; k <= unixDe; ) {
        let needJudgeDate = this.msToDate(parseInt(k)).withoutTime;
        //不加这个if判断直接push的话就是已知时间段内的所有日期
        if (new Date(needJudgeDate).getDay() === weekNum) {
          // console.log(needJudgeDate);
          var data = new Date(needJudgeDate).getTime() / 1000;
          dateArr.push(data);
        }
        k = k + 24 * 60 * 60 * 1000;
      }
      // console.log(dateArr);
      return dateArr;
    },
    //根据毫秒数获取日期
    msToDate(msec) {
      let datetime = new Date(msec);
      let year = datetime.getFullYear();
      let month = datetime.getMonth();
      let date = datetime.getDate();
      let hour = datetime.getHours();
      let minute = datetime.getMinutes();
      let second = datetime.getSeconds();

      let result1 =
        year +
        "-" +
        (month + 1 >= 10 ? month + 1 : "0" + (month + 1)) +
        "-" +
        (date + 1 < 10 ? "0" + date : date) +
        " " +
        (hour + 1 < 10 ? "0" + hour : hour) +
        ":" +
        (minute + 1 < 10 ? "0" + minute : minute) +
        ":" +
        (second + 1 < 10 ? "0" + second : second);

      let result2 =
        year +
        "-" +
        (month + 1 >= 10 ? month + 1 : "0" + (month + 1)) +
        "-" +
        (date + 1 < 11 ? "0" + date : date);

      let result = {
        hasTime: result1,
        withoutTime: result2
      };
      //  console.log(result)
      return result;
    }
  },
  watch: {
    len: function() {
      this.time = [];
      console.log(this.len);
      console.log("........");
      this.checkList = [];
      this.dateArr = [];
      if (!this.len[1] && this.len[0]) {
        // console.log(new Date().getTime())

        var date = SETDATE(new Date(this.len[0] * 1000) / 1000);
        var year = Number(date.substring(0, 4)) + 2;
        var other = date.substring(4, date.length);
        console.log("////'''''----");

        this.time[1] = new Date(year + other).getTime();
        this.time[0] = this.len[0] * 1000;
      } else if (this.len.length == 0) {
        var date = SETDATE(new Date() / 1000);
        var year = Number(date.substring(0, 4)) + 2;
        var other = date.substring(4, date.length);

        this.time[1] = new Date(year + other).getTime();
        this.time[0] = this.len[0] * 1000;
      } else {
        console.log("////");
        this.len.forEach(element => {
          element = element * 1000;
          this.time.push(element);
        });
      }

      this.$emit("func", { name: this.name, type: this.radio, val: [] });
    },
    radio: function() {
      if (
        this.time.length !== 2 &&
        this.checkList.length > 0 &&
        !this.checkList
      ) {
        this.$message({
          message: "请先选择时间段",
          type: "warning"
        });
        return;
      }
      if (this.radio == 1) {
        var arr = [];
        this.checkList.forEach(element => {
          var list = this.getWeek(Number(element));
          arr = arr.concat(list);
        });
        this.$emit("func", { name: this.name, type: this.radio, val: arr });
      }
      if (this.radio == 2) {
        var arr = [];
        this.dateArr.forEach(element => {
          arr.push(new Date(element).getTime());
        });

        this.$emit("func", { name: this.name, type: this.radio, val: arr });
      }
    },
    checkList: function() {
      if (this.checkList.length == 7) {
        this.checked = true;
      } else {
        this.checked = false;
      }
      if (this.time.length !== 2 && !this.checkList > 0 && !this.status) {
        this.checkList = [];
        this.$message({
          message: "请先选择时间段",
          type: "warning"
        });

        return;
      }
      if (this.radio == 1) {
        var arr = [];
        this.checkList.forEach(element => {
          var list = this.getWeek(Number(element));
          arr = arr.concat(list);
        });

        this.$emit("func", { name: this.name, type: this.radio, val: arr });
      }
    },
    dateArr: function(params) {
      if (
        this.time.length !== 2 &&
        this.dateArr.length > 0 &&
        !this.checkList
      ) {
        this.$message({
          message: "请先选择时间段",
          type: "warning"
        });
        this.dateArr = [];
        return;
      }
      if (this.dateArr.length > 0) {
        var len = this.dateArr.length - 1;
        var date = new Date(this.dateArr[len]).getTime();
        if (this.time[0] > date || this.time[1] < date) {
          this.$message({
            message: "不能超出日期范围",
            type: "warning"
          });
          this.dateArr.splice(len, 1);
        }
      }

      if (this.radio == 2) {
        var arr = [];
        this.dateArr.forEach(element => {
          arr.push(new Date(element).getTime() / 1000);
        });

        this.$emit("func", { name: this.name, type: this.radio, val: arr });
      }
    },
    value: function(params) {
      // console.log(this)

      this.$emit("func", {
        name: this.name,
        type: this.radio,
        val: this.value
      });
    },
    checked: function(params) {
      if (this.checked) {
        this.checkList = ["1", "2", "3", "4", "5", "6", "0"];
      } else {
        //  this.checkList=[]
        if (this.checkList.length == 7) {
          this.checkList = [];
        }
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.compitem {
  .compname {
    font-size: 14px;
    // padding-right:15px;
    width: 90px;
  }
  width: 100%;
  display: flex;
  align-items: center;
}
.flexitem {
  display: flex;
  .flexright {
    // width: 800px;
    // height: 80px;
    // background: red;
    display: flex;
    flex-direction: column;
    .flextop {
      // height: 40px;
      display: flex;
      align-items: center;
      margin-bottom: 10px;
    }
  }
}
</style>